<template>
	<view class="payment_container">
		<u--text size="15" lineHeight="40" align="center" type="info" text="小花订单" />
		<u--text size="15" lineHeight="10" align="center" type="info" :text="order.uuid" />
		<u--text mode="price" size="35" align="center" bold type="warning" :text="order.totalPrice" />
		<u--text size="15" lineHeight="20" align="center" type="info" :text="setExpireDate" />
		<view class="payeeStyle">
			<u-row justify="space-between">
				<u-col span="6" textAlign="left"><view class="payee">收款方</view></u-col>
				<u-col span="6" textAlign="right"><view class="merchant">小花支付平台</view></u-col>
			</u-row>
		</view>
		<u-button type="success" :throttleTime="15 * 1000" text="立即支付" @click="payNow"></u-button>
	</view>
</template>

<script>
import dayjs from 'dayjs';
export default {
	data() {
		return {
			order: {
				expireMillis:7200000,
				timeMillis:1648969883339,
				totalPrice:21,
				uuid:"b3fe02628dc04db8a3a882faab3e502f"
			},
			eventChannel: ''
		};
	},
	computed: {
		setExpireDate() {
			return dayjs(this.order.timeMillis)
				.add(this.order.expireMillis, 'millisecond')
				.format('YYYY年MM月DD日 HH:mm:ss');
		}
	},
	onLoad() {
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		this.eventChannel = this.getOpenerEventChannel();
		this.eventChannel.on('acceptDataFromOpenerPage', data => this.order = data.order);
		uni.hideLoading();
	},
	watch: {
	},
	methods: {
		payNow() {
			uni.showLoading({
				title: '支付中...',
				mask: true
			});
			this.$axios
				.post('/PaymentScanCode/order/pay', {
					order: JSON.stringify(this.order)
				})
				.then(res => {
					uni.hideLoading();

					uni.showToast({
						icon: res.data.code == 43000 ? 'success' : 'error',
						title: res.data.msg,
						duration: 2000,
						success() {
							if (res.data.code == 43000) {
								uni.setStorageSync('balance', res.data.data);
							}
						},
						complete: () => {
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								});
							}, 2000);
						}
					});
				});
		}
	}
};
</script>

<style lang="scss">
.payment_container {
	.payeeStyle {
		background-color: #929292;
		line-height: 80rpx;
		box-shadow: 1px 1px 3px 1px grey;
		margin-bottom: 50rpx;

		.payee {
			padding-left: 20rpx;
		}

		.merchant {
			padding-right: 20rpx;
			color: white;
		}
	}
}
</style>
